//
//  FlipView.swift
//  MySwiftUIDemo
//
//  Created by wangws1990 on 2024/7/4.
//

import SwiftUI

struct FlipView: View {
    @State private var isRotated = false
    let list = ["icon_puzz_type_sub1","icon_puzz_type_sub2","icon_puzz_type_sub3","icon_puzz_type_sub4","icon_puzz_type_sub5"]
    var isFlip: Bool{
        return index % 2 == 1
    }
    @State var index: Int = 0
    var body: some View {
        ZStack{
            Color.white
            ZStack{
                Color.black.frame(width: 150,height: 50).zIndex(30)
                Color.yellow.frame(width: 150,height: 50).zIndex(10)
                Color.red.frame(width: 150,height: 50).zIndex(15)
            }
        }
        .onTapGesture {
            index = index + 1
        }
    }
    @ViewBuilder
    var getBottomAnimalView: some View{
        let img = !isFlip ? current : before
        ZStack{
            Color.blue
            Image(img).resizable().scaledToFit()
            //Text(img).font(.largeTitle).foregroundColor(.red)
        }.frame(width: 150,height: 150)

    }
    @ViewBuilder
    var getTopAnimalViewAppear: some View{
        let img =  !isFlip ? before : current
        ZStack{
            Color.gray
            Image(img).resizable().scaledToFit()
          //  Text(img).font(.largeTitle).foregroundColor(.red)
        }.frame(width: 150,height: 150)
    }
    @ViewBuilder
    var getTopAnimalViewDismiss : some View{
        let img = current
        ZStack{
            Color.gray
            Image(img).resizable().scaledToFit()
          //  Text(img).font(.largeTitle).foregroundColor(.red)
        }.frame(width: 150,height: 150)
 
    }
    var before: String{
        return getData(-1)
    }
    var current: String{
        return getData(0)
    }
    var after: String{
        return getData(1)
    }
    func getData(_ tags: Int)->String{
        var currentIndex = index
        if tags == 0{
            currentIndex = index
        }else if tags == -1{
            currentIndex = index - 1
        }else if tags == 1{
            currentIndex = index + 1
        }
        let inde = currentIndex % list.count
        if inde >= 0{
            return list[inde]
        }
        return ""
    }
}

//#Preview {
//    FlipView()
//}
struct FlippedPhotoLargeViewLeft<FrontView, BackView>: View where FrontView: View, BackView: View{
    let isFlipped: Bool
    var offset_x: CGFloat = 0
    var frontView: () -> FrontView
    var backView: () -> BackView
    var body: some View{
        ZStack{
            let font = isFlipped
            let back = !isFlipped
            let durationZero = 0.001//g_isInWidget ? 0.0 : 0.001
            ZStack{
                backView()
                    .compositingGroup()
                    .offset(x: back ? -offset_x : 0)
                    .animation(back ? .spring(duration: durationZero).delay(0.4) : .spring(duration: 0.4), value: back)
                    .compositingGroup()
                    .zIndex(back ? 0 : 1)
                
                frontView()
                    .compositingGroup()
                    .offset(x: font ? -offset_x : 0)
                    .animation(font ? .spring(duration: durationZero).delay(0.4) : .spring(duration: 0.4), value: font)
                    .compositingGroup()
                    .zIndex(font ? 0 : 1)
            }
        }
    }
}

struct FlippedPhotoLargeViewRight<FrontView, BackView>: View where FrontView: View, BackView: View{
    let isFlipped: Bool
    var offset_x: CGFloat = 0
    var frontView: () -> FrontView
    var backView: () -> BackView
    var body: some View{
        ZStack{
            let font = isFlipped
            let back = !isFlipped
            backView()
                .compositingGroup()
                .offset(x:back ? -offset_x : 0)
                .animation(back ? .spring(duration: 0.4): .none, value: back)
                .compositingGroup()
                .zIndex(back ? 1 : 0)
            frontView()
                .compositingGroup()
                .offset(x:font ? -offset_x : 0)
                .animation(font ? .spring(duration: 0.4): .none, value: font)
                .compositingGroup()
                .zIndex(font ? 1 : 0)
        }
    }
}
struct FlippedTurnView<Content>: View where Content: View{
    var index: Int
    var tx: CGFloat
    var isAdd: Bool //左侧- 右侧+
    var content: () -> Content
    func getx()->CGFloat{
        return tx
    }
    var isFlip: Bool{
        return abs(index) % 2 == 0
    }
    var isRight: Bool{
        return getx() > 0
    }
    var isLeft: Bool{
        return getx() < 0
    }
    var body: some View {
        let ex = getx()
        let showLeft = isLeft && isAdd
        let showRight = isRight && !isAdd
        let show = (showLeft || showRight)
        GeometryReader { geo in
            let w = geo.size.width
            ZStack{
                content()
                .compositingGroup()
                .offset(x:CGFloat(ex*w))
                .animation(show ? .linear(duration: 0.001).delay(0.4) : .linear(duration: 0.4), value: isFlip)
                .compositingGroup()
                //用于过度
                content()
                .opacity(showLeft ? 1 : 0)
                .compositingGroup()
                .offset(x: !isLeft ? w : w*2)
                .animation(isLeft ?  .linear(duration: 0.4) : .none, value: isLeft)
                .compositingGroup()
                
                content()
                .opacity(showRight ? 1 : 0)
                .compositingGroup()
                .offset(x: show ? -w*2 : -w)
                .animation(isRight ? .linear(duration: 0.4) : .none, value: isRight)
                .compositingGroup()
                //右边到左边
                ZStack{
                    content()
                    .compositingGroup()
                    .opacity(showRight ? 1 : 0)
                    .compositingGroup()
                }
                .compositingGroup()
                .offset(x: showRight ? ex*w  : (-ex*w + w) )
                .animation(isRight ? .linear(duration: 0.4) : .easeOut(duration: 0.001), value: isRight)
                .compositingGroup()
                // 左边道右边
                ZStack{
                    content()
                    .opacity(showLeft ? 1 : 0)
                }
                .compositingGroup()
                .offset(x: isLeft ? ex*w  : ( -ex*w - w) )
                .animation(isLeft ? .linear(duration: 0.4) : .none, value: isLeft)
                .compositingGroup()
            }
            .compositingGroup()
        }
  
    }
}
